<template>
	<div class="checkBox">
		<view v-if="title" class="checkBox-title">{{title}}</view>
		<radio-group @change="radioChange">
			<label v-for="(item,index) in data" :key="index" :class="{ labelClass: value == item.name }">
				<view>
				<radio :value="item.name"  :checked="value == item.name"/>
				</view>
				<view>{{ item.name }}</view>
			</label>
		</radio-group>
	</div>
</template>
<script>
export default {
	props:{
		title:{
			type:String,
			default:''
		},
		data:{
			type:Array,
			default:()=>[]
		},
		id:{
			type:String,
			default:'id'
		},
		name:{
			type:String,
			default:'name'
		},
	},
	data() {
		return {
			value:""
		};
	},
	methods: {
		radioChange(event) {
			this.value = event.detail.value;
			// 双向绑定导致编译失败，改用refs赋值方法
			// this.$emit('update:value',event.detail.value);
		}
	}
};
</script>
<style lang="scss">
.checkBox {
	.checkBox-title {
		font-size: 24rpx;
		color: gray;
	}
	text {
	}
	radio {
		display: none;
	}
	label {
		display: inline-block;
		width: 100rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border: 2rpx solid #e0e0e0;
		margin: 15rpx;
		border-radius: 6rpx;
		transition: all 0.3s;
	}
	.labelClass {
		border-color: #ff393c;
		background-color: #ff393c;
	}
}
</style>
